<template>
    <div>
        <h1 style="background-color:white">团队协作</h1>
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
            <el-table-column prop="projectName" label="项目协作" />
                
            <el-table-column prop="name" label="管理员" width="180" >
                <template #default = "{row}">
                    <span v-for="(item,index) in row.admins" :key=index>{{item}}<span>;</span></span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template #default = "{row}">
                    <span>{{dayjs(row.createdAt).format('YYYY年MM月DD日 HH:mm')}}</span>
                </template>
            </el-table-column>
            
            <el-table-column prop="status" label="状态" width="180" />
            <el-table-column fixed="right" label="操作" width="120">
                <template #default>
                    <el-button text type="primary" size="small">
                    关闭
                    </el-button>
                    <el-button link type="primary" size="small">退出</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>

import { onMounted, ref } from 'vue';
import { dayjs } from 'element-plus'
// @ts-ignore
import {GetProjectList} from '@/api/project.js'

const loading = ref(true)

const tableData = ref([])

onMounted (() => {
    const res = GetProjectList();
    res.then(res => {
        console.log(res.data.data);
        tableData.value = res.data.data;
    })
    loading.value = false;
})


</script>
